<template name="gui-im-messages">
<view class="gui-im">
		<view class="gui-im-msg gui-im-msg-left">
			<view class="gui-im-face">
				<image class="gui-im-face-image" src="../../static/robot.png" mode="widthFix"></image>
			</view>
			<view class="gui-im-content-spacing"></view>
			<view class="gui-im-content-in">
				<view class="gui-im-name">
					<text style="line-height:28rpx; height:28rpx; font-size:26rpx; color:#666666;">客服小机器人</text>
				</view>
				<!-- 文本消息 -->
				<view>
					<view class="gui-im-content-txt" >
						<view style="line-height:38rpx; font-size:30rpx;">							
							<view>
									<view class="gui-margin gui-margin-top">
										<text class="gui-h5 gui-color-gray gui-bold">常见问题</text>
									</view>
									<view class="my-list">
										<view  class="gui-list-items" v-for="(item,index) in articleData" :key="index" @tap="goToDetails" :data-title="item.title" :data-link="item.link" >
											<view class="gui-list-body gui-border-b">
												<view class="gui-list-title">
													<text class="gui-list-title-text gui-list-one-line gui-ellipsis">{{item.title}}</text>
												</view>		
											</view>
											<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
										</view>
										<view class="gui-list-items">
											<view class="gui-list-body gui-border-b">
												<view class="gui-list-title">
													<view class="gui-button gui-bg-primary gui-noborder button" style="width: 100%;" hover-class="gui-tap" @tap="makePhone">
															<text class="gui-color-white gui-button-text button-text"> 客服电话： 0377 - 69296662</text>
													</view>
												</view>		
											</view>
										</view>
									</view>
								</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height:100px;"></view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			articleData:[],
			phoneNum:"037769296662"
		}
	},
	onLoad() {
		this.$http.request({
			url:'Service/index',
			method:"GET",
			data:{},
		}).then(res=>{
			this.articleData = res
		}).catch(err=>{
			
		})
	},
	methods: {
		goToDetails:function(e){
			console.log(e);
			let title = e.currentTarget.dataset.title
			let link = e.currentTarget.dataset.link
			uni.navigateTo({
				url:"./details?title="+title+"&link="+link
			})
		},
		makePhone:function(){
			uni.makePhoneCall({
				phoneNumber:this.phoneNum
			})
		}
	}
}
</script>
<style scoped>
.gui-im{padding:30rpx;}
.gui-im-msg{margin-bottom:28px; display:flex; flex-direction:row; flex-wrap:nowrap;}
.gui-im-face{width:60rpx; height:60rpx; overflow:hidden; flex-shrink:0; border-radius:6rpx; overflow:hidden; font-size:0;}
.gui-im-face-image{width:60rpx;}
.gui-im-name{padding-bottom:10rpx; margin-top:-5rpx; }
.gui-im-content-spacing{width:25rpx; height:50rpx; flex-shrink:0;}
.gui-im-content-in{width:600rpx; overflow:hidden;}
.gui-im-content-txt{background-color:#efefef; padding:15rpx 20rpx; border-radius:6rpx; min-width:100rpx;}
.gui-im-msg-right{flex-direction:row-reverse;}
.gui-im-flex-end{display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end;}
</style>